import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Bar } from '@ant-design/plots';

const DemoBar = () => {
  const data =  [
    {
      "univ_name": "南昌大学",
      "cour_level": "国家级",
      "count": 150
    },
    {
      "univ_name": "南昌大学",
      "cour_level": "省级",
      "count": 415
    },
    {
      "univ_name": "江西财经大学",
      "cour_level": "国家级",
      "count": 130
    },
    {
      "univ_name": "江西财经大学",
      "cour_level": "省级",
      "count": 397
    },
    {
      "univ_name": "江西师范大学",
      "cour_level": "国家级",
      "count": 101
    },
    {
      "univ_name": "江西师范大学",
      "cour_level": "省级",
      "count": 296
    },
    {
      "univ_name": "江西理工大学",
      "cour_level": "国家级",
      "count": 79
    },
    {
      "univ_name": "江西理工大学",
      "cour_level": "省级",
      "count": 150
    },
    {
      "univ_name": "江西农业大学",
      "cour_level": "国家级",
      "count": 57
    },
    {
      "univ_name": "江西农业大学",
      "cour_level": "省级",
      "count": 101
    }
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'count',
    yField: 'univ_name',

    legend: {
      position: 'top-left',
      itemName: {style: {fontSize: 18}},
    },


    /** 自定义颜色 */
    // color: ['#1383ab', '#c52125'],
    seriesField: 'cour_level',
    marginRatio: 0,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'left', 'middle', 'right'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    yAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Bar {...config} />;
};

export default DemoBar
